<template>
	<view class="page">
		<view class="page-header">
			<view class="title">编辑个人信息</view>
			<view class="subtitle">完善您的个人资料</view>
		</view>

		<view class="form-container">
			<uni-forms ref="form" :modelValue="userData" :rules="rules" label-position="top">
				<view class="avatar-section">
					<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" :value="fileLists" @select="fileSelected" :auto-upload="false">
						<view class="avatar-picker">
							<image class="avatar-image" :src="userData.avatarUrl || '/static/center4/avatar.png'">
							</image>
							<view class="avatar-edit-icon">
								<view class="icon-circle">
									<image src="/static/icons/edit.png"></image>
								</view>
							</view>
						</view>
					</uni-file-picker>
					<view class="avatar-tip">点击修改头像</view>
				</view>

				<view class="form-group">
					<view class="form-title">基本信息</view>

					<uni-forms-item label="账号">
						<uni-easyinput :value="userData.account" disabled class="input-disabled"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="userData.name" :value="userData.name" placeholder="请输入您的姓名" type="text"
							trim="all"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="手机号码" required name="phone">
						<uni-easyinput v-model="userData.phone" :value="userData.phone" placeholder="请输入您的手机号码"
							type="number" trim="all"></uni-easyinput>
					</uni-forms-item>
				</view>

				<view class="form-group">
					<view class="form-title">详细信息</view>

					<uni-forms-item label="年龄" name="age">
						<uni-easyinput v-model="userData.age" :value="userData.age" placeholder="请输入您的年龄" type="number"
							trim="all"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="性别" required name="gender">
						<uni-data-checkbox v-model="userData.gender" :value="userData.gender" :localdata="sexs"
							class="gender-checkbox"></uni-data-checkbox>
					</uni-forms-item>
				</view>
			</uni-forms>

			<view class="button-group">
				<button class="btn btn-cancel" @click="cancel">取消</button>
				<button class="btn btn-save" @click="save">保存修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onMounted,
	ref
} from 'vue';
import {
	onShow,
	onLoad,
} from '@dcloudio/uni-app';
import { sexs } from '@/common/js/common';
import {
	userInfo, deleteFile, saveInfo, uploadFile
} from '@/common/js/api';
import { navigateBack } from '@/common/js/common';

const userId = uni.getStorageSync('userId');

// 当前登录用户信息
onLoad(() => {
	userInfo(userId).then(result => {
		userData.value = result;
		fileLists.value = [{
			url: userData.value.avatarUrl,
		}];
	});
});

const userData = ref({
	account: '',
	age: 0,
	avatarUrl: '',
	gender: '未知',
	name: '',
	phone: '',
	pwd: '',
	email: ''
});

const selectedInfo = ref();
const selectedFilePath = ref();
const isSelected = ref(false);
const form = ref(null);
const fileLists = ref();

// 表单校验规则
const rules = ref({
	name: {
		rules: [{
			required: true,
			errorMessage: '姓名不能为空'
		}]
	},
	phone: {
		rules: [{
			required: true,
			errorMessage: '手机号码不能为空'
		}, {
			format: 'number',
			errorMessage: '手机号码格式不正确'
		}]
	},
	gender: {
		rules: [{
			required: true,
			errorMessage: '请选择性别'
		}]
	},
});

const imageStyles = ref({
	width: 120,
	height: 120,
	border: {
		radius: '50%'
	}
});

const save = () => {
	form.value.validate().then(res => {
		// 显示加载中提示
		uni.showLoading({
			title: '保存中...'
		});

		// 如果上传了头像
		if (isSelected.value) {
			uploadFile(selectedInfo.value.tempFilePaths[0]).then(avatarUrl => {
				userData.value.avatarUrl = avatarUrl;
				saveUserInfo();
			});
		} else {
			saveUserInfo();
		}
	}).catch(err => {
		console.log('err', err);
	})
}

// 保存用户信息
const saveUserInfo = () => {
	saveInfo(userData.value).then(() => {
		uni.hideLoading();
		uni.showToast({
			title: '保存成功',
			icon: 'success',
			duration: 2000
		});
		setTimeout(() => {
			navigateBack();
		}, 1500);
	}).catch(err => {
		uni.hideLoading();
		uni.showToast({
			title: '保存失败',
			icon: 'error'
		});
	});
}

// 修改头像方法
const fileSelected = (e) => {
	selectedInfo.value = e;
	isSelected.value = true;
};

// 取消方法，在这里删除上传的文件
const cancel = () => {
	uni.showModal({
		title: '提示',
		content: '确定放弃修改吗？',
		success: function (res) {
			if (res.confirm) {
				navigateBack();
			}
		}
	});
};
</script>

<style lang="scss">
.page {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding: 30rpx;
	box-sizing: border-box;

	.page-header {
		margin-bottom: 40rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #999;
		}
	}

	.form-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.avatar-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;

			.avatar-picker {
				position: relative;
				width: 160rpx;
				height: 160rpx;

				.avatar-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 122, 69, 0.2);
				}

				.avatar-edit-icon {
					position: absolute;
					right: 0;
					bottom: 0;

					.icon-circle {
						width: 50rpx;
						height: 50rpx;
						background: #ff7a45;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 2rpx 8rpx rgba(255, 122, 69, 0.3);

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}

			.avatar-tip {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.form-group {
			margin-bottom: 30rpx;

			.form-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				border-left: 8rpx solid #ff7a45;
			}
		}

		:deep(.uni-forms-item__label) {
			font-size: 28rpx;
			color: #666;
		}

		:deep(.uni-easyinput__content) {
			background-color: #f8f8f8;
			border-radius: 10rpx;
			height: 80rpx;
			border: none !important;

			.uni-easyinput__content-input {
				font-size: 28rpx;
				color: #333;
			}
		}

		:deep(.input-disabled .uni-easyinput__content) {
			background-color: #f1f1f1;

			.uni-easyinput__content-input {
				color: #999;
			}
		}

		:deep(.gender-checkbox) {
			.uni-data-checklist {
				.checklist-group {
					display: flex !important;
					flex-direction: row !important;

					.checklist-box {
						padding: 12rpx 30rpx !important;
						margin-right: 20rpx !important;
						background-color: #f8f8f8 !important;
						border-radius: 40rpx !important;
						border: 2rpx solid transparent !important;

						&.is-checked {
							background-color: rgba(255, 122, 69, 0.1) !important;
							border-color: #ff7a45 !important;

							.checklist-text {
								color: #ff7a45 !important;
							}
						}

						.checklist-text {
							font-size: 28rpx !important;
							color: #666 !important;
						}
					}
				}
			}
		}
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;

		.btn {
			width: 45%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 500;
			border: none;
		}

		.btn-cancel {
			background-color: #f1f1f1;
			color: #666;

			&:active {
				background-color: #e5e5e5;
			}
		}

		.btn-save {
			background: linear-gradient(135deg, #ff7a45, #ff9c6e);
			color: #fff;
			box-shadow: 0 8rpx 20rpx rgba(255, 122, 69, 0.3);

			&:active {
				background: linear-gradient(135deg, #f06a35, #ff8c5e);
			}
		}
	}
}
</style>